import { Card, Dropdown, Table,Menu } from "antd";
import React from "react";
import { useState } from "react";
import UButton from "../UButton";
import "./index.less";
const { Column } = Table;

/***
 * @description 基于Antd的自定义Table组件
 * @author Bronson
 * @lastUpdateDate:2021.07.22
 *
 */
const UTable = ({ columnList, dataSource, operations = [], onSelected }) => {
  const [selectedList,setSelectedList] = useState([])
  // 操作菜单
  const opMenus = (
    <Menu>
      {
        operations.filter((i,index)=>index > 0).map(item=>
          <Menu.Item key={item.key}>
            <a onClick={item.method}>{item.name}</a>
          </Menu.Item>
        )
      }
    </Menu>
  )
  const rowSelection = {
    onSelect: (record, selected, selectedRows, nativeEvent) => {
      onSelected(selectedRows);
      setSelectedList(selectedRows);
    },
    onSelectAll:(selected,selectedRows,changeRows)=>{
      onSelected(selectedRows);
      setSelectedList(selectedRows);
    }
  };
  return (
    <div className="u-table">
      <Card>
        <div className="u-table--tools">
          <div className="u-table--left">
            {
              selectedList.length > 0 ? <span className="selected">选择了{selectedList.length}项</span> : ''
            }
          </div>
          <div className="u-table--right">
            {
              operations.length ? <UButton
                type="default"
                value={ operations[0].name }
                onClick={operations[0].method}
              /> : ''
            }
           
            <Dropdown placement="bottomCenter" overlay={ opMenus }> 
              <div className="u-table-actions"></div>
            </Dropdown >
          </div>
        </div>
        <Table rowSelection={rowSelection} dataSource={dataSource}>
          {columnList.map((item) => (
            <Column
              key={item.id}
              title={item.title}
              dataIndex={item.id}
              width={item.width}
              render={item.render}
            ></Column>
          ))}
        </Table>
      </Card>
    </div>
  );
};

export default UTable;
